<template>
    <div id="zhanghao">
        <div class="text" ref="text"></div>
        <div id="input">
            <div>
                <i class="iconfont">&#xe633;</i>
                <input ref="username" placeholder="美团账户(手机/邮箱/用户名)" />
                <h6 @click="shanchu1">X</h6>
            </div>
           
            <div>
                <i class="iconfont">&#xe62e;</i>
                <input ref="password" placeholder="请输入密码" />
                <h6 @click="shanchu2">X</h6>
            </div>
        </div>
        <button @click="login" class="denglu" ref='denglu'>登录</button>
        <span class="wangjimiam">忘记密码</span>
        <span class="shuoming">说明:注册/登录说明您已经同意《美团用户协议》</span>
    </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import axios from 'axios'
export default {
    methods: {
        login() {
            console.log(123)
            var username = this.$refs.username.value;
            var password = this.$refs.password.value;
            var denglu = this.$refs.denglu;
            var text = this.$refs.text;
            var that=this;

            if (/^\s*$/g.test(username)) {
                
            } else if (/^\s*$/g.test(password)) {
               
            } else if (!/(^1[0-9]{10}$)|(^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$)/.test(username)) {
                console.log(text)
                text.style.display='block';
                text.innerHTML="账号密码错误,是否找回密码"
            } else {
                
                axios.get('http://localhost:3005/users/reg', {
                    params: {
                        username: username,
                        password: password
                    }
                }).then(function (res) {
                    console.log(res.data[res.data.length - 1])
                    alert(res.data[res.data.length - 1])
                }).catch(function (err) {
                    console.log(err)
                })
            }



        },
        shanchu1() {
            this.$refs.username.value = '';
        },
        shanchu2() {
            this.$refs.password.value = '';
        }
    }

}
</script>
<style lang="scss" scoped>
@import '../../static/hotcss/px2rem.scss';
#zhanghao{
    text-align: center;
}
.text{
    height: px2rem(80);
    background: #FFF6E0;
    display: none;
    color: #D78900;
    font-size: px2rem(28);
    line-height: px2rem(80);
}
#input {
    width: 100%;
    padding: 0 px2rem(40);
    height: px2rem(200);
    background: #fff;

    div {
        height: px2rem(98);
        width: 100%;
        border-bottom: 1px solid #ccc;
        line-height: px2rem(90);
        i {
            display: inline-block;
            font-size: px2rem(40);
        }
        input {
            display: inline-block;
            width: px2rem(600);
            border: none;
            height: px2rem(80);
            font-size: px2rem(28);
            color: #ccc;
            outline: none;
        }
    }
    div:nth-child(2) {
        border-bottom: none;
    }
    p {
        color: #ccc;
        font-size: px2rem(28);
        background: #fff;
        width: 100%;
        line-height: px2rem(100);
        text-align: left;
    }
    // div:nth-child(4) {
    //     width: px2rem(200);
    //     height: px2rem(64);
    //     background: #cdcdcd;
    //     border-radius: px2rem(5);
    //     font-size: px2rem(32);
    //     color: #fff;
    //     position: absolute;
    //     top: px2rem(207);
    //     left: px2rem(475);
    //     line-height: px2rem(64)
    // }
}

.denglu {
    width: px2rem(646);
    height: px2rem(84);
    background: #fdc900;
    font-size: px2rem(30);
    color: rgba(107, 69, 10, .4);
    margin-top: px2rem(20);
    border: none;
}

.shuoming {
    font-size: px2rem(28);
    color: #ddd;
    position: absolute;
    left: 0;
    bottom: 150px;
    width: 100%;
    height: px2rem(50);
    color: #898989;
}

.wangjimiam {
    color: #6b450a;
    font-size: px2rem(28);
    display: block;
    margin-left: px2rem(520);
    margin-top: px2rem(20);
}

h6 {
    font-size: 25px;
    z-index: 40;
    color: #fff;
    position: relative;
    left: 611px;
    top: -59px;
    border: none;
    background: #ccc;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    line-height: px2rem(40);
    border-radius: 50%;
}
</style>


